var $configPanel;
var values, type;
var renderConfig = function() {
	if (!$.isArray(values)) {
		return;
	}
	var $select = $configPanel.find('select[name="' + type + '"]').empty();
	$.each(values, function(i, value) {
		if (typeof value === 'string') {
			$select.append('<option value="' + value + '">' + value + '</option>');
		} else {
			var $optgroup = $('<optgroup label="' + value.name + '"></optgroup>').appendTo($select);
			$.each(value.price, function(j, item) {
				$optgroup.append('<option value="' + item.name + '">' + item.name + '</option>');
			});
		}
	});
};

var init = function() {
	$configPanel = $('#config');
	
	var matchGroup = document.location.pathname.match(/\/(\w+)$/);
	type = matchGroup && matchGroup.length > 1 ? matchGroup[1] : '';
	
	getConfig(type, function(err, config) {
		if (err) {
			renderError(err);
			return;
		}
		values = config.values;
		renderConfig();
	});
	
	$configPanel.find('.panel').each(function(i, panel) {
		var $panel = $(panel);
		
		$panel.find('.add-btn').click(function(event) {
			var $this = $(this);
			var $input = $panel.find('input');
			var $select = $panel.find('select');
			if (!$.trim($input.val())) {
				$input.focus();
				return;
			}
			$select.append('<option value="' + $input.val() + '">' + $input.val() + '</option>');
			$input.val('');
		});
		
		$panel.find('.update-btn').click(function(event) {
			var $this = $(this);
			var $input = $panel.find('input');
			var $select = $panel.find('select');
			if (!$.trim($input.val())) {
				$input.focus();
				return;
			}
			var $option = $select.find('option:selected');
			$option.val($input.val());
			$option.text($input.val());
		});
		
		$panel.find('.delete-btn').click(function(event) {
			var $this = $(this);
			var $select = $panel.find('select');
			$select.find('option:selected').remove();
		});
		
		$panel.find('.up-btn').click(function(event) {
			var $this = $(this);
			var $select = $panel.find('select');
			var $option = $select.find('option:selected');
			
			$option.insertBefore($option.prev());
		});
		
		$panel.find('.down-btn').click(function(event) {
			var $this = $(this);
			var $select = $panel.find('select');
			var $option = $select.find('option:selected');
			
			$option.insertAfter($option.next());
		});
		
		$panel.find('select').click(function(event) {
			var $this = $(this);
			var $input = $panel.find('input');
			var $option = $this.find('option:selected');
			
			$input.val($option.val());
		});
	});
	
	
	$configPanel.find('.reset-btn').click(function(event) {
		renderConfig();
	});
	
	$configPanel.find('.save-btn').click(function(event) {
		var param = {};
		$configPanel.find('.panel select').each(function(i, select) {
			var $select = $(select);
			
			var values = [];
			$select.find('option').each(function(j, option) {
				values.push(option.value);
			});
			
			param[$select.attr('name')] = values;
		});
		
		putConfig(type, param, function(err, config) {
			if (err) {
				console.error(err);
				alert('保存失败。');
				return;
			}
			
			values = config;
			alert('保存成功。');
		});
	});
};

$(init);